<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>文章类别管理</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<link rel="stylesheet" type="text/css" href="js/skin/WdatePicker.css"/>
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script src="js/tendina.min.js" type="text/javascript"></script>
		<script src="js/WdatePicker.js" type="text/javascript"></script>
	</head>

	<body>
		<!--头部导航条  S:-->
		<nav class="navbar navbar-default min-hei">
			<div class="container-fluid">
				<ul class="nav navbar-nav ">
					<div class="navbar-header mr10">
						<img class="img-responsive" src="img/sshe1.png" alt="logo" />
					</div>
					<li class="active">
						<a href="">微党建</a>
					</li>
					<li>
						<a href="">微食堂</a>
					</li>
					<li>
						<a href="">微报修</a>
					</li>
					<li>
						<a href="">微乐摇</a>
					</li>
					<li>
						<a href="">微通讯</a>
					</li>
					<li>
						<a href="">微考勤</a>
					</li>
					<li>
						<a href="">微考试</a>
					</li>
					<li>
						<a href="">微会议</a>
					</li>

				</ul>
				<div class="navbar-collapse">
					<p class="navbar-text navbar-right">超级管理员: 嘻哈小C</p>
				</div>
			</div>
		</nav>
		<!--E:头部导航条-->
		<div class="col-md-2 col-sm-2 col-xs-2 p0">
			<!--菜单-->
			<div class="layout_left_menu">
				<ul id="menu">
					<li class="childUlLi">
						<a href="" target="menuFrame"><i class="glyphicon glyphicon-align-justify"></i>学习平台管理</a>
						<ul>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>文献学习</a>
								<ul>
									<li>
										<a menu="1" idType="tab1"  href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>中央精神</a>
									</li>
									<li>
										<a menu="1" idType="tab2" href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党史图书馆</a>
									</li>
									<li>
										<a menu="1" idType="tab3" href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>重温党课</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>模范学习</a>
								<ul>
									<li>
										<a menu="1" idType="tab4" href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>楷模事迹</a>
									</li>
									<li>
										<a menu="1" idType="tab5" href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>优秀党支部介绍</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>廉政学习</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>廉政学习</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>知识及动态</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党建知识库</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>党建动态近期播报</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="" target="menuFrame"><i class="glyphicon glyphicon-menu-right-p10"></i>在线评测</a>
							</li>
						</ul>
					</li>
					<li class="childUlLi">
						<a href="" target="menuFrame"> <i class="glyphicon glyphicon-align-justify"></i>党建工作平台</a>
						<ul>
							<li class="childUlLi">
								<a href="#"><i class="glyphicon glyphicon-menu-right icon-chevron-right-p10"></i>工作计划</a>
								<ul>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>工作计划</a>
									</li>
									<li>
										<a href="#"><i class="glyph-icon icon-chevron-chevron-right-p20"></i>活动计划</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-p10"></i>活动宣传</a>
							</li>
						</ul>
					</li>
					<li class="childUlLi">
						<a href="" target="menuFrame"> <i class="glyphicon glyphicon-align-justify"></i>党建交流平台</a>
						<ul>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-fonts"></i>通知</a>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-menu-right-fonts"></i>公告</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<!--菜单-->
		</div>
		<div class="col-md-10 col-sm-10 col-xs-10">
			<div class="row mb10">
				<div class="col-lg-12">
					<!--添加导航tabs的内容-->
					<ul class="nav nav-tabs" id="tabs">
						<li>
							<a data-toggle="tab" href="#tab0">首页</a>
						</li>
						<li class="active">
							<a data-toggle="tab" href="#tab1">文章类别管理</a>
						</li>
					</ul>
					<!--添加对应tabs的内容-->
					<div class="tab-content" id="tabContent">
						<div class="tab-pane" id="tab0">
							<div class="thumbnail mt20 bor0">
								<img class="img-responsive mt50" src="img/welcome.png"/>
							</div>
						</div>
						<div class="tab-pane active" id="tab1">
							<div class="row">
								<div class="col-md-12 mt20">
									<div class="form-inline">
										<div class="form-group">
											<p class="form-control-static">类型名称</p>
										</div>
										<div class="form-group ml10">
											<input type="text" class="form-control" />
										</div>
									</div>
									
								</div>
								<div class="col-md-12 mt20">
									<div class="btn-group">
										<button class="btn btn-primary">查询</button>
									</div>
									<div class="btn-group ml10">
										<button class="btn btn-primary" data-toggle="modal" data-target="#cAdd">添加</button>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 mt20">
									<table class="table table-bordered">
										<thead>
											<th>编号</th>
											<th>类别名称</th>
											<th>所属类别</th>
											<th>创建时间</th>	
											<th>操作</th>	
										</thead>
										<tbody>
											<tr>
												<td>1</td>
												<td>文章类别1</td>
												<td>中央精神</td>
												<td>2016/08/08 11:11</td>
												<td class="text-center">
													<button class="btn btn-xs btn-info" data-toggle="modal" data-target=".updata">编辑</button>
													<button class="btn btn-xs btn-danger">删除</button>
												</td>
											</tr>
											<tr>
												<td>2</td>
												<td>文章类别2</td>
												<td>党史图书馆</td>
												<td>2016/08/01 11:11</td>
												<td class="text-center">
													<button class="btn btn-xs btn-info" data-toggle="modal" data-target=".updata">编辑</button>
													<button class="btn btn-xs btn-danger">删除</button>
												</td>
											</tr>
											<tr>
												<td>3</td>
												<td>文章类别3</td>
												<td>重温党课</td>
												<td>2016/08/09 11:11</td>
												<td class="text-center">
													<button class="btn btn-xs btn-info" data-toggle="modal" data-target=".updata">编辑</button>
													<button class="btn btn-xs btn-danger">删除</button>
												</td>
											</tr>
										</tbody>
									</table>
									<nav>
										<ul class="pagination pull-right">
											<li class="disabled">
												<a href="javascript:"><span>&laquo;</span></a>
											</li>
											<li class="active">
												<a href="javascript:">1 <span class="sr-only">1</span></a>
											</li>
											<li>
												<a href="javascript:">2 <span class="sr-only">2</span></a>
											</li>
											<li>
												<a href="javascript:">3 <span class="sr-only">3</span></a>
											</li>
											<li>
												<a href="javascript:">...<span class="sr-only">4</span></a>
											</li>
											<li>
												<a href="javascript:">99 <span class="sr-only">99</span></a>
											</li>
											<li>
												<a href="javascript:">&raquo;</span></a>
											</li>
										</ul>
									</nav>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<!--添加 弹出层-->
		<div class="modal fade" id="cAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">添加文章</h4>
					</div>
					<div class="modal-body">
						<div class="form-inline">
							<div class="form-group">
								<p class="form-control-static">所属类别</p>
							</div>
							<div class="form-group ml10">
								<input type="text" class="form-control" />
							</div>
						</div>
						<div class="form-inline mt10">
							<div class="form-group">
								<p class="form-control-static">类型名称</p>
							</div>
							<div class="form-group ml10">
								<input type="text" class="form-control" />
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">保存草稿</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
			
		</div>
		
		<!--编辑弹出层-->
		
		<div class="modal fade updata" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
						<h4 class="modal-title" id="myModalLabel">编辑文章</h4>
					</div>
					<div class="modal-body">
						<div class="form-inline">
							<div class="form-group">
								<p class="form-control-static">所属类别</p>
							</div>
							<div class="form-group ml10">
								<input value="中央精神" type="text" readonly="readonly" class="form-control" />
							</div>
						</div>
						<div class="form-inline mt10">
							<div class="form-group">
								<p class="form-control-static">类型名称</p>
							</div>
							<div class="form-group ml10">
								<input type="text" class="form-control" />
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">保存草稿</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
			
		</div>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/style.js" type="text/javascript"></script>
	</body>

</html>